<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js"></script>
	</head>

	<body>
		<div id="app" v-my-directive>

		</div>
		<script>
			//自定义拆件对象
			let myPlugin = {}

			//向对象当中注入方法或函数
			myPlugin.install = function(Vue, options) {
				console.log('启动自定义插件的方法')
				console.log(options)

				Vue.directive("my-directive", {
					bind(el, binding) {
						el.style = 'width:100px;height:100px;' +
							'background-color:#ccc;'
					}
				})
			}
			//将自定义的插件注入到当中Vue对象当中
			Vue.use(myPlugin, {
				someOption: true
			})
			var vm = new Vue({
				el: "#app",
			})
		</script>
	</body>

</html>